<!DOCTYPE html>
<html lang="en">
<head>
    <title>Lobipanel - jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lib/jquery-ui.min.css"/>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="lib/highlight/github.css"/>
    <link rel="stylesheet" href="demo/documentation.css"/>
    <link rel="stylesheet" href="dist/css/lobipanel.min.css"/>
    <link rel="stylesheet" href="demo/demo.css"/>
</head>
<body>
    <div id="lobipanel">
        <div class="container">
            <p></p>
            <div class="alert alert-info">
                <p>For documentation visit <a href="http://lobianijs.com/site/lobipanel">Lobipanel webpage</a></p>
            </div>
            <!--Examples-->
            <div id="lobipanel-examples">
                <!--Basic example-->
                <div>
                    <h3>Basic example</h3>
                    <div class="bs-example">
                        <div id="lobipanel-basic" class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    Panel title
                                </div>
                            </div>
                            <div class="panel-body">
                                Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>$('selector').lobiPanel();
</code></pre>
                    </div>
                </div>
                <!--Custom controls-->
                <div>
                    <h3>Disable control buttons</h3>
                    <div class="bs-example">
                        <div id="lobipanel-custom-control" class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    Panel title
                                </div>
                            </div>
                            <div class="panel-body">
                                Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>$('selector').lobiPanel({
reload: false,
close: false,
editTitle: false
});
</code></pre>
                    </div>
                </div>
                <!--Font awesome controls-->
                <div>
                    <h3>Use font awesome icons</h3>
                    <div class="bs-example">
                        <div id="lobipanel-font-awesome" class="panel panel-info">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    Panel title
                                </div>
                            </div>
                            <div class="panel-body">
                                Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>$('selector').lobiPanel({
reload: {
    icon: 'fa fa-refresh'
},
editTitle: {
    icon: 'fa fa-edit',
    icon2: 'fa fa-save'
},
unpin: {
    icon: 'fa fa-arrows'
},
minimize: {
    icon: 'fa fa-chevron-up',
    icon2: 'fa fa-chevron-down'
},
close: {
    icon: 'fa fa-times-circle'
},
expand: {
    icon: 'fa fa-expand',
    icon2: 'fa fa-compress'
}
});
</code></pre>
                    </div>
                </div>
                <!--Constrain panel size-->
                <div>
                    <h3>Constrain panel size</h3>
                    <p>Unpin the panel and try to resize it.</p>
                    <div class="bs-example">
                        <div id="lobipanel-constrain-size" class="panel panel-primary">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    Panel title
                                </div>
                            </div>
                            <div class="panel-body">
                                Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing.
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>$('selector').lobiPanel({
minWidth: 300,
minHeight: 300,
maxWidth: 600,
maxHeight: 480
});
</code></pre>
                    </div>
                </div>
                <!--Load content from ajax-->
                <div>
                    <h3>Load content from url</h3>
                    <p>Load content from specified url and apply highlight code</p>
                    <div class="bs-example">
                        <div id="lobipanel-from-url" class="panel panel-success" data-autoload="false">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    <h4>Content from url</h4>
                                </div>
                            </div>
                            <div class="panel-body" style="height: 400px; overflow: auto;">

                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>$('selector').on('loaded.lobiPanel', function(ev, lobiPanel){
var $body = lobiPanel.$el.find('.panel-body');
$body.html('&lt;div class="highlight">&ltpre>&lt;code>' + $body.html() + '&lt;/code>&lt;/pre>&lt;/div>');
hljs.highlightBlock($body.find('code')[0]);
});
$('selector').lobiPanel({
loadUrl: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css',
bodyHeight: 400
});
</code></pre>
                    </div>
                </div>
                <!--Multiple lobiPanels-->
                <div id="lobipanel-multiple">
                    <h3>Multiple panels with drag & drop</h3>
                    <p>Drag panels by clicking on the headers</p>
                    <div class="bs-example">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-info" data-initial-index="4">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Default title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Default title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Default title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Default title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Default title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-warning" data-initial-index="2">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Warning title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-danger">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Danger title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="#">
                                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h4 class="media-heading">Media heading</h4>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Panel title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>Mark</td>
                                                    <td>Otto</td>
                                                    <td>@mdo</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td>Larry</td>
                                                    <td>the Bird</td>
                                                    <td>@twitter</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Panel title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <table class="table table-striped">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Username</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th scope="row">1</th>
                                                    <td>Mark</td>
                                                    <td>Otto</td>
                                                    <td>@mdo</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">2</th>
                                                    <td>Jacob</td>
                                                    <td>Thornton</td>
                                                    <td>@fat</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row">3</th>
                                                    <td>Larry</td>
                                                    <td>the Bird</td>
                                                    <td>@twitter</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>$('.panel').lobiPanel({
sortable: true
});
</code></pre>
                    </div>
                </div>
                <!--Initialize with data attributes-->
                <div>
                    <h3>Initialize with <code>data-*</code> attributes</h3>
                    <div class="bs-example">
                        <div class="panel panel-default lobipanel" data-stateful="true" data-inner-id="lobipanel-data-attributes" data-body-height="300" data-tooltips="false"
                             data-min-width="400" data-resize="horizontal" data-close="{tooltip: 'custom'}">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    This is panel title
                                </div>
                            </div>
                            <div class="panel-body">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>Thornton</td>
                                            <td>@fat</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td>Larry</td>
                                            <td>the Bird</td>
                                            <td>@twitter</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>&lt;div class=&quot;panel panel-default lobipanel&quot; data-inner-id=&quot;lobipanel-data-attributes&quot; data-body-height=&quot;300&quot; data-tooltips=&quot;false&quot; data-min-width=&quot;400&quot; data-resize=&quot;horizontal&quot; data-close=&quot;{tooltip: &apos;custom&apos;}&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
   &lt;div class=&quot;panel-title&quot;&gt;
       This is panel title
   &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;panel-body&quot;&gt;
    content
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
                    </div>
                </div>
                <!--Nested LobiPanel-->
                <div id="lobipanel-nested-example">
                    <h4>Nested LobiPanel example</h4>
                    <div class="bs-example">
                        <div class="panel panel-info lobipanel">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    <h4>LobiPanel title</h4>
                                </div>
                            </div>
                            <div class="panel-body">
                                <div class="panel panel-warning lobipanel">
                                    <div class="panel-heading">
                                        <div class="panel-title">
                                            <h4>Nested LobiPanel title</h4>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        Panel 1
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="panel panel-default lobipanel" data-sortable="true">
                                            <div class="panel-heading">
                                                <div class="panel-title">
                                                    <h4>Panel title</h4>
                                                </div>
                                            </div>
                                            <div class="panel-body">
                                                Panel 2
                                            </div>
                                        </div>
                                        <div class="panel panel-default lobipanel" data-sortable="true">
                                            <div class="panel-heading">
                                                <div class="panel-title">
                                                    <h4>Panel title</h4>
                                                </div>
                                            </div>
                                            <div class="panel-body">
                                                Panel 3
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="panel panel-default lobipanel" data-sortable="true">
                                            <div class="panel-heading">
                                                <div class="panel-title">
                                                    <h4>Panel title</h4>
                                                </div>
                                            </div>
                                            <div class="panel-body">
                                                Panel 4
                                            </div>
                                        </div>
                                        <div class="panel panel-default lobipanel" data-sortable="true">
                                            <div class="panel-heading">
                                                <div class="panel-title">
                                                    <h4>Panel title</h4>
                                                </div>
                                            </div>
                                            <div class="panel-body">
                                                Panel 5
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre><code>&lt;div class=&quot;panel panel-info lobipanel&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
    &lt;div class=&quot;panel-title&quot;&gt;
        &lt;h4&gt;LobiPanel title&lt;/h4&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;panel-body&quot;&gt;
    &lt;div class=&quot;panel panel-warning lobipanel&quot;&gt;
        &lt;div class=&quot;panel-heading&quot;&gt;
            &lt;div class=&quot;panel-title&quot;&gt;
                &lt;h4&gt;Nested LobiPanel title&lt;/h4&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;panel-body&quot;&gt;
            Panel 1
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-lg-6&quot;&gt;
            &lt;div class=&quot;panel panel-default lobipanel&quot; data-sortable=&quot;true&quot;&gt;
                &lt;div class=&quot;panel-heading&quot;&gt;
                    &lt;div class=&quot;panel-title&quot;&gt;
                        &lt;h4&gt;Panel title&lt;/h4&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;panel-body&quot;&gt;
                    Panel 2
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;panel panel-default lobipanel&quot; data-sortable=&quot;true&quot;&gt;
                &lt;div class=&quot;panel-heading&quot;&gt;
                    &lt;div class=&quot;panel-title&quot;&gt;
                        &lt;h4&gt;Panel title&lt;/h4&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;panel-body&quot;&gt;
                    Panel 3
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-lg-6&quot;&gt;
            &lt;div class=&quot;panel panel-default lobipanel&quot; data-sortable=&quot;true&quot;&gt;
                &lt;div class=&quot;panel-heading&quot;&gt;
                    &lt;div class=&quot;panel-title&quot;&gt;
                        &lt;h4&gt;Panel title&lt;/h4&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;panel-body&quot;&gt;
                    Panel 4
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;panel panel-default lobipanel&quot; data-sortable=&quot;true&quot;&gt;
                &lt;div class=&quot;panel-heading&quot;&gt;
                    &lt;div class=&quot;panel-title&quot;&gt;
                        &lt;h4&gt;Panel title&lt;/h4&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;panel-body&quot;&gt;
                    Panel 5
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/jquery.1.11.min.js"></script>
    <script src="lib/jquery-ui.min.js"></script>
    <script src="lib/jquery.ui.touch-punch.min.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="lib/highlight/highlight.pack.js"></script>
    <script src="dist/js/lobipanel.js"></script>
    <script>
        $(function(){
            var codes = $('.highlight code');
            codes.each(function (ind, el) {
                hljs.highlightBlock(el);
            });

            $('.lobipanel').lobiPanel();
            $('#demoPanel11').lobiPanel();
            $('#lobipanel-basic').lobiPanel();
            $('#lobipanel-custom-control').lobiPanel({
                reload: false,
                close: false,
                editTitle: false
            });
            $('#lobipanel-font-awesome').lobiPanel({
                reload: {
                    icon: 'fa fa-refresh'
                },
                editTitle: {
                    icon: 'fa fa-edit',
                    icon2: 'fa fa-save'
                },
                unpin: {
                    icon: 'fa fa-arrows'
                },
                minimize: {
                    icon: 'fa fa-chevron-up',
                    icon2: 'fa fa-chevron-down'
                },
                close: {
                    icon: 'fa fa-times-circle'
                },
                expand: {
                    icon: 'fa fa-expand',
                    icon2: 'fa fa-compress'
                }
            });
            $('#lobipanel-constrain-size').lobiPanel({
                minWidth: 300,
                minHeight: 300,
                maxWidth: 600,
                maxHeight: 480
            });
            $('#lobipanel-from-url').on('loaded.lobiPanel', function (ev, lobiPanel) {
                var $body = lobiPanel.$el.find('.panel-body');
                $body.html('<div class="highlight"><pre><code>' + $body.html() + '</code></pre></div>');
                hljs.highlightBlock($body.find('code')[0]);
            }).lobiPanel({
                loadUrl: 'bootstrap/dist/css/bootstrap.min.css',
                bodyHeight: 400
            });
            $('#lobipanel-multiple').find('.panel').lobiPanel({
                sortable: true
            });
        });
    </script>
</body>
</html>